<!doctype html>
<html>

<head>
<meta charset="utf-8">

<title>Why ECharts</title>

<meta name="description" content="Why echarts?">
<meta name="author" content="kener.linfeng@gmail.com">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
	content="black-translucent" />

<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">

<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">

<link rel="stylesheet" href="css/echarts-slide.css">

<!-- Fav and touch icons -->
<link rel="shortcut icon" href="../asset/ico/favicon.png">

<!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
<style type="text/css">
* {
	font-family: '微软雅黑' !important;
}

.main, .main2 {
	background-color: #fff;
	background: url('./img/big_load.gif') #fff no-repeat 50% 50%;
	height: 400px;
	overflow: hidden;
	padding: 10px !important;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.noLoading {
	background: #fff;
}

.main canvas {
	left: 0;
	top: 0;
}

.main div {
	text-align: left !important;
}

.echarts-dataview p {
	font-size: 16px !important;
	color: #333;
	text-align: left;
}

p, h4 {
	text-align: left !important;
	text-transform: none !important;
}

h5 strong, small strong {
	color: #9acd32;
	font-weight: normal !important;
}

td, th {
	text-align: center !important;
	font-size: 0.7em !important;
}

.reveal small, .reveal a.roll {
	line-height: 1.5em;
}

.reveal blockquote {
	width: 100%;
}

.reveal blockquote small {
	line-height: 1.5em;
}

.reveal img.echarts-icon {
	margin: 0;
	padding: 7px;
	border: 0;
	background: none
}

.reveal img {
	max-width: 100%;
	max-height: 100%;
}

.reveal .slides>section, .reveal .slides>section>section {
	padding: 0;
}

.reveal ul ul li {
	font-size: 20px;
	color: #78B9E6
}
</style>
</head>

<body>
	<a href="https://github.com/ecomfe/echarts" target="_blank"> <img
		style="position: absolute; top: 0; right: 0; border: 0; z-index: 1000"
		src="img/fork.png" alt="Fork me on GitHub">
	</a>
	<div class="reveal">
		<!-- Any section element inside of this container is displayed as a slide -->
		<div class="slides">
			<section>
				<h1 style="margin: -10px 0 0 0">
					<img src="./img/echarts_logo.png"
						style="margin: 0; background: rgba(0, 0, 0, 0); border-width: 0; box-shadow: 0 0 0px rgba(0, 0, 0, 0);" />
				</h1>
				<h5>It's time to redefine the chart!</h5>
				<br />
				<div>
					<small>Open source from Baidu SSG Data Visualization Team</small><br />
					<small>Created by <a href="http://weibo.com/kenerlinfeng"
						target="_blank">@Kener-林峰</a></small>
				</div>
			</section>

			<section>
				<h4>Innumerable charts library!</h4>
				<div class="fragment" style="text-align: right;">
					<hr />
					Why <strong style="color: #9acd32">ECharts</strong> ?
				</div>
			</section>

			<section>
				<h4 style="color: #9acd32">Data Interactive Visualization</h4>
				<p>
					<small> <br />Data visualization with an <strong>interactive
							graphical user interface (GUI)</strong>. Data's visual presentation is <strong>not
							only for statement</strong>, bug also for <strong>data mining,
							integration</strong> to the data presented. Make data visualization to be
						a way of people's <strong>visual thinking</strong>.
					</small>
				</p>
				<br />
				<div class="fragment" style="text-align: right;">
					<hr>
					<small>Let's find out what <a
						href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>
						has done for this purpose?<br /> <small>* The following
							content is recommended full-screen (F11)</small>
					</small>
				</div>
			</section>

			<section>
				<section>
					<h4>[ Drag-Recalculate ] Data reorganized</h4>
					<p>
						<small>The default classification of chart can't always
							meet the needs of everyone. <br />Look at the following example:
							if you want to know the combined proportion that IE 6, IE 7, and
							IE 8 represent, what will you do? Mental arithmetic or take out a
							pen?
						</small>
					</p>
					<p class="fragment">
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, try to <strong>drag</strong> the
							desired items on top of each other to combine them!
						</small>
					</p>
					<div class="main" optionKey="calculable1"></div>
				</section>

				<section>
					<h4>[ Drag-Recalculate ] Deal with outliers</h4>
					<p>
						<small>There are often outliers in our data. Look at the
							following sales data in Chinese Single Day (11-11). Except the
							sales peak on Single Day, can you find something else? </small>
					</p>
					<p class="fragment">
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, try to <strong>drag</strong> the
							outlier out! <br />Wow, after dragging that out, can you find
							some trend which is not optimistic?
						</small>
					</p>
					<div class="main" optionKey="calculable2"></div>
				</section>
			</section>

			<section>
				<h4>[ Data View ] Sometimes we need the original data</h4>
				<p>
					<small>If the data presented is important to the users,
						then they will not satisfied to see a visual chart.</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, Try to <strong>click</strong><img
						src="./img/iconDataView.png" class="echarts-icon" />! <br />You
						can even <strong>edit</strong> your data and update the chart!
						Compared with Drag-Recalculate, this is batch operation!
					</small>
				</p>
				<div class="main" optionKey="dataView"></div>
			</section>

			<section>
				<section>
					<h4>[ Magic Switch ] Try different charts at once</h4>
					<p>
						<small>We can use different charts to express the same
							data. However it's hard to make an always-good choice since their
							performance depends on data, personal preference etc. For
							example, choose a bar chart or a line chart ? </small>
					</p>
					<p class="fragment">
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, you can switch the chart magicly!
							Try to <strong>switch</strong> the bar chart<img
							src="./img/iconBarChart.png" class="echarts-icon" />to the line
							chart<img src="./img/iconLineChart.png" class="echarts-icon" />,
							or from stack to tiled<img src="./img/iconStack.png"
							class="echarts-icon" />, maybe you will have more interpretation
							of this data.
						</small>
					</p>
					<div class="main" optionKey="magicType"></div>
				</section>
				<section>
					<h4>[ Magic Switch ] Try different charts at once</h4>
					<p>
						<small>We can use different charts to express the same
							data. However it's hard to make an always-good choice since their
							performance depends on data, personal preference etc. For
							example, choose a bar chart or a line chart ? </small>
					</p>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, you can switch the chart magicly!
							Maybe you will have more interpretation of this data.
						</small>
					</p>
					<div class="main" optionKey="magicType2"></div>
				</section>
				<section>
					<h4>[ Magic Switch ] Try different charts at once</h4>
					<p>
						<small>We can use different charts to express the same
							data. However it's hard to make an always-good choice since their
							performance depends on data, personal preference etc. For
							example, choose a bar chart or a line chart ? </small>
					</p>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, you can switch the chart magicly!
							Maybe you will have more interpretation of this data.
						</small>
					</p>
					<div class="main" optionKey="legendSelected"></div>
				</section>
			</section>

			<section>
				<h4>[ Scale Roaming ] Focus on the interested data</h4>
				<p>
					<small>We can use different colors in Coordinate based
						charts (like map or scatter) to show the distribution of the data
						vividly. <br />But how can I focus on the data that I am
						interesting in? For example, how to look over the top 10% area?
						Find pen again?
					</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, You can do scale roaming: try to <strong>drag</strong>
						the color scale up or down. <br />The mean of this doesn't need
						more explanation.<br />
					</small>
				</p>
				<div class="main" optionKey="dataRange1"></div>
			</section>

			<section>
				<h4>[ Space Zoom ] Focus on the interested data</h4>
				<p>
					<small>Display space is always limited, so we need Space
						Zoom, you can zoom the space easily.</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, you can use the <strong>drag
							chooser</strong> at the bottom or the <strong>block chooser</strong><img
						src="./img/iconDataZoom.png" class="echarts-icon" /> to zoom in or
						<strong>back</strong><img src="./img/iconDataZoomReset.png"
						class="echarts-icon" />! Of course, they are always in lockstep. <br />Maybe
						you have found the <strong>Extreme MarkPoint</strong> and the <strong>Average
							MarkLine</strong> are also in lockstep.<br />
					</small>
				</p>
				<div class="main" optionKey="dataZoom1"></div>
			</section>

			<section>
				<h4>[ Linkage ] More powerful tool for data correlation
					analysis</h4>
				<p>
					<small> Sometimes, multi-series data in one chart would be
						confusing. However, they are associated and can't be separated? </small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, we provide a capability called
						"Linkage".
					</small>
				</p>
				<div class="main" optionKey="multiCharts"
					style='height: 210px; padding-bottom: 0; border-bottom-width: 0'></div>
				<div id="mcMain2" class="main2"
					style='height: 140px; padding: 1px 10px; border-width: 0 1px;'></div>
				<div id="mcMain3" class="main2"
					style='height: 100px; padding-top: 1px; border-top-width: 0'></div>
			</section>

			<section>
				<section>
					<h4>[ Mixed Timeline ] Expand the dimension of time</h4>
					<p>
						<small>Time data analysis is a very important direction in
							information visualization!</small>
					</p>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, we provide a timeline control which
							can be mixed with any charts to show the spatio-temporal data
							changes.
						</small>
					</p>
					<div class="main" optionKey="timeline1"></div>
				</section>
				<section>
					<h4>[ Mixed Timeline ] Expand the dimension of time</h4>
					<p>
						<small>Time data analysis is a very important direction in
							information visualization!</small>
					</p>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, we provide a timeline control which
							can be mixed with any charts to show the spatio-temporal data
							changes.
						</small>
					</p>
					<div class="main" optionKey="timeline2"></div>
				</section>
			</section>

			<section>
				<h4>[ Large-scale ] Show the charm of big data</h4>
				<p>
					<small>How to show hundreds of discrete data in order to
						identify their distribution and clustering?<br /> <span
						class="fragment">Oh, sorry should be <strong>hundred
								thousand, event million</strong> data! In addition to professional
							statistical tools(Such as MATLAB), it seems we have no choice,
							especially on the web!
					</span>
					</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, we can show 200,000 data in one
						second.
					</small>
				</p>
				<div class="main" optionKey="scatter"></div>
			</section>

			<section>
				<section>
					<h4>[ Force-directed layout ] Elegant display of networks</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, we provide Force-directed layout to
							show network data. <br />For example, social networks of <strong>Job</strong>!
						</small>
					</p>
					<div class="main" optionKey="force1"></div>
				</section>
				<section>
					<h4>[ Force-directed layout ] Elegant display of networks</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, we provide Force-directed layout to
							show network data. <br />Let's check a more complicated example:
							<strong>class depends relationship of Webkit Kernel</strong>!
						</small>
					</p>
					<div class="main" optionKey="force2" style="height: 500px"></div>
				</section>
			</section>

			<section>
				<h4>[ Dynamically Addition ] Show your realtime data</h4>
				<p>
					<small>New data comes every second, we should keep up with
						the rhythm.<br />
					</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, we provide dynamic data interface to
						add new data!<br /></small>
				</p>
				<div class="main" optionKey="dynamic"></div>
			</section>

			<section>
				<h4>[ Legend Switch ] Switch to the interested data</h4>
				<p>
					<small>Multi-series data show us many things, however
						somtimes we are just interested in some part of them. how to do ?</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, we create some boxes to achieve this
						feature. <br />Just <strong>click</strong> on those legends, the
						meaning need no explanation !
					</small>
				</p>
				<div class="main" optionKey="legendSelected"></div>
			</section>

			<section>
				<h4>[ Multi-dimensional Stacking ] More expressive chart</h4>
				<p>
					<small>Sometimes the multi-dimensional stacking chart shows
						more expressively than a single stacking chart. However, we know
						that most of the charts don't support it. </small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, supported!<br /></small>
				</p>
				<div class="main" optionKey="stack"></div>
			</section>

			<section>
				<h4>[ BI Component ] Some widely used business chart</h4>
				<p>
					<small>The most common use of gauge chart is to display the
						key indicators for performance management. And the funnel plot is
						widely used in marketing analysis.</small>
				</p>
				<p class="fragment">
					<small>This is <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a>, we provide two highly customizable
						chart for this: <strong>Gauge</strong> and <strong>Funnel</strong>!<br /></small>
				</p>
				<div class="main" optionKey="gf"></div>
			</section>

			<section>
				<section>
					<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
					<p>
						<small>Sometimes the mixed charts will be more expressive
							and more interesting! <small>This is <a
								href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>,
								the chart we provided(11 types) can be mixed freely.<br /></small>
						</small>
					</p>
					<img src="../asset/img/doc/charts.jpg"
						style="width: 100%; max-width: 100%; margin: 0;">
				</section>

				<section>
					<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, the chart we provided can be mixed
							freely.<br /></small>
					</p>
					<div class="main" optionKey="mix1"></div>
				</section>

				<section>
					<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, the chart we provided can be mixed
							freely.<br /></small>
					</p>
					<div class="main" optionKey="mix2"></div>
				</section>

				<section>
					<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, the chart we provided can be mixed
							freely. <br />With the event handler you can event create an
							interactive system! <br />try <strong>click</strong> the map and
							you will find more fun.
						</small>
					</p>
					<div class="main" optionKey="mix3"></div>
				</section>

				<section>
					<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
					<p>
						<small>This is <a href="http://ecomfe.github.io/echarts/"
							target="_blank">ECharts</a>, the chart we provided can be mixed
							freely. <br />Perhaps you can also play a bit of whimsy?
							Generally speaking, pie(radar) chart is not suitable for showing
							trends in data, how about lots of pie(radar)? <br />We call this
							multilayer nested as "<a onclick="functionMap['lasagna']()"
							style="cursor: pointer">lasagna</a>" or "<a
							onclick="functionMap['wormhole']()" style="cursor: pointer">wormhole</a>"!<br />
						</small>
					</p>
					<div class="main" optionKey="lasagna"></div>
				</section>
			</section>

			<section>
				<h4>[ Highly Customizable Capabilities] Creativity</h4>
				<p>
					<small>Do not limit your creativity because of the chart
						ability. <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a> has more than <strong>600</strong>
						configured items, with a <strong>multi-level control</strong>
						system which make it has a highly customizable capabilities.
					</small>
				</p>
				<img src="../asset/img/creativity.jpg"
					style="width: 100%; max-width: 100%; margin: 0;">
			</section>

			<section>
				<section>
					<h4>[ Glare Effect ] Ability to attract the eye</h4>
					<p>
						<small>We know that many times we need to be cool. <br />
						<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>
							has <strong>Glare Effects</strong>，especially use it on the map:
							<strong>Migration</strong> <br />And when you have a lots of
							data, you can try our <strong>Large-scale Glare
								MarkPoint Effects</strong>
						</small>
					</p>
					<div class="main"
						style="height: 500px; background-color: transparent"
						optionKey="effect1"></div>
				</section>
				<section>
					<h4>[ Glare Effect ] Ability to attract the eye</h4>
					<p>
						<small>We know that many times we need to be cool. <br />
						<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>
							has <strong>Glare Effects</strong>，especially use it on the map:
							<strong>Migration</strong> <br />And when you have a lots of
							data, you can try our <strong>Large-scale Glare
								MarkPoint Effects</strong>
						</small>
					</p>
					<div class="main"
						style="height: 500px; background-color: transparent"
						optionKey="effect2"></div>
				</section>
				<section>
					<h4>[ Glare Effect ] Ability to attract the eye</h4>
					<p>
						<small>We know that many times we need to be cool. <br />
						<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>
							has <strong>Glare Effects</strong>，especially use it on the map:
							<strong>Migration</strong> <br />And when you have a lots of
							data, you can try our <strong>Large-scale Glare
								MarkPoint Effects</strong>
						</small>
					</p>
					<div class="main"
						style="height: 500px; background-color: transparent"
						optionKey="effect3"></div>
				</section>
			</section>

			<section>
				<section>
					<h4>Application - Baidu</h4>
					<div>
						<img src="./img/usage1.png" width="100%" />
					</div>
				</section>
				<section>
					<h4>Application - Others</h4>
					<div>
						<img src="./img/usage2.png" width="100%" />
					</div>
				</section>
			</section>

			<section>
				<h4>ECharts VS Excel</h4>
				<p>
					<small>Although those chart provided by Excel have no
						interaction at all, but its rich chart type and configuration,
						easy to use, Excel is the most commonly data statistics tools.</small>
				</p>
				<table
					class="fragment table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>ECharts</th>
							<th>Excel</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Histogram</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Bar</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Line</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Area</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Scatter</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Bubble</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>K</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Pie</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Doughnut</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Radar</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Force</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>Chord</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>Surface</td>
							<td class='error'>No</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>Map</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>EventRiver</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
					</tbody>
				</table>
			</section>

			<section>
				<section>
					<h4>ECharts VS Highcharts (1)</h4>
					<p>
						<small>The industry has countless JS chart, many
							outstanding representative, like chartjs, FusionCharts, amCharts,
							flot, RGraph, jqPlot, gRaphaël etc. Some are free and even open
							source, while others are commercial, you can find them easily.</small>
					</p>
					<p class="fragment">
						<small>Unable to compare with them all, let's choose <a
							href="http://www.highcharts.com/" target="_blank">Highcharts</a>,
							an excellent, mature business chart library which is widely known
							in the world. <br />First about the <strong>charts type</strong>?
						</small>
					</p>
					<table
						class="fragment table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th>#</th>
								<th>ECharts</th>
								<th>Highcharts</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Histogram（Bar）</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Line（Area）</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Pie（Doughnut）</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Scatter（Bubble）</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Radar</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>K</td>
								<td>Yes</td>
								<td class='success'>Highstock</td>
							</tr>
							<tr>
								<td>Force</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Chord</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Map</td>
								<td>Yes</td>
								<td class='success'>Highmap</td>
							</tr>
							<tr>
								<td>EventRiver</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Special（Gauge, Funnel）</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
						</tbody>
					</table>
				</section>

				<section>
					<h4>ECharts VS Highcharts (2)</h4>
					<p>
						<small>Let's look at the <strong>features</strong>?
						</small>
					</p>
					<table class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th>#</th>
								<th>ECharts</th>
								<th>Highcharts</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Drag-Recalculate</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Data View</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Magic Switch</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Scale Roaming</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Large-scale Data</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Glare Effect</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Linkage</td>
								<td>Yes</td>
								<td class='error'>No</td>
							</tr>
							<tr>
								<td>Space Zoom</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Legend Switch</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Multi-dimensional Stacking</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Mixed Charts</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td>Image Export</td>
								<td>Yes</td>
								<td>Yes</td>
							</tr>
							<tr>
								<td><br />License &amp; Pricing</td>
								<td class='success'>Free<br />
								<a
									href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
									target="_blank">Baidu BSD</a></td>
								<td class='success'>Non-commercial free under CC3.0<br />
								<br />Commercial licenses $90~$3600
								</td>
							</tr>
						</tbody>
					</table>
				</section>
			</section>

			<section>
				<h4>This is ECharts</h4>
				<p class="fragment">
					<small>We just try our best to show the <span
						style="color: #f50">real</span> data for you,
					</small>
				</p>
				<p class="fragment">
					<small>and provides an intuitive, easy-to-use interactive
						way to help you to deal with <span style="color: #f50">data
							mining, extraction, correction or consolidation</span>, <br />
					<strong>（Drag-Recalculate, Data View）</strong>
					</small>
				</p>
				<p class="fragment">
					<small>so that you can <span style="color: #f50">focus
							on</span> what you care about,<br />
					<strong>（Legend Switch, Space Zoom, Scale Roaming）</strong></small>
				</p>
				<p class="fragment">
					<small>have <span style="color: #f50">different
							interpretation</span> to the same data in different ways.<br />
					<strong>（Magic Switch, Multi-dimensional Stacking,
							Linkage, Mixed Charts）</strong></small>
				</p>
				<div class="fragment">
					<hr />
					<p>
						<small><strong>Time to re-define the chart</strong>,
							browse the charts outputed by ECharts, you no longer just a
							"reader", you can participate. This is <a
							href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>,
							an powerfull data visualizaiont tool with interactive graphical
							user interface.</small>
					</p>
				</div>
			</section>

			<section>
				<h4>Acknowledgement</h4>
				<p>
					<small> <a href="http://ecomfe.github.io/echarts/"
						target="_blank">ECharts</a> cann't grow up without their excellent
						contributions :<br /> <a href="http://weibo.com/kenerlinfeng"
						target="_blank">@Kener-林峰</a> <a href="http://weibo.com/pissang"
						target="_blank">@pissang</a> <a href="http://weibo.com/errorrik"
						target="_blank">@errorrik</a> <a href="http://weibo.com/forain"
						target="_blank">@diysimon</a> <a
						href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a> <a
						href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a> <a
						href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
						<a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
					</small>
				</p>
				<br />
				<p>
					<small>With their encouragement and support :<br /> <a
						href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a> <a
						href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
						<a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a> <a
						href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a> <a
						href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a>
					</small>
				</p>
				<br />
				<p>
					<small>Also, it's nice being with you...<br /> <a
						href="http://weibo.com/u/2006785117" target="_blank">@财财某</a> <a
						href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a> <a
						href="http://weibo.com/cosname" target="_blank">@统计之都</a> <a
						href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a>
					</small>
				</p>
				<br />
				<p class="fragment">
					<small>Finally, you'd be welcome to <a
						href="https://github.com/ecomfe/echarts" target="_blank">join
							us</a>~
					</small>
				</p>
			</section>

			<section>
				<h1>THE END</h1>
				<h5>Thank you</h5>
				<br />
				<div>
					<small>Created by <a href="http://weibo.com/kenerlinfeng"
						target="_blank">@Kener-林峰</a></small>
				</div>
			</section>

		</div>

	</div>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.min.js"></script>

	<script>
            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,
                height: '100%',

                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

                // Optional libraries used to extend on reveal.js
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    //{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                    // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
                    // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });

        </script>
	<script src="../example/www/js/echarts.js"></script>
	<script src="js/whyEcharts-en.js"></script>
	<script src="js/timelineOption.js"></script>
</body>
</html>
